<template>
  <div
  class="shelf-item"
  :class="{'shelf-item-shadow' : data.type !== 3, 'is-edit' : isEditMode && data.type == 2 }"
  @click="onItemClick">
    <component :is="item" :data='data'></component>
    <div
    class="icon-selected"
    v-show="isEditMode && data.type === 1"
    :class="{'is-selected' : data.selected}"
    ></div>
  </div>
</template>
<script>
import { storeHomeMixin, storeShelfMixin } from '../../utils/mixin'
import shelfCategory from './shelfItemCategory.vue'
import shelfBook from './shelfItemBook.vue'
import shelfAdd from './shelfItemAdd.vue'
export default {
  mixins: [storeShelfMixin, storeHomeMixin],
  props: {
    data: Object
  },
  data() {
    return {
      book: shelfBook,
      category: shelfCategory,
      Add: shelfAdd
    }
  },
  computed: {
    item() {
      return this.data.type === 1
        ? this.book
        : this.data.type === 2
          ? this.category
          : this.Add
    }
  },
  methods: {
    onItemClick() {
      // 判断是否为编辑模式
      this.data.selected = !this.data.selected
      if (this.isEditMode) {
        // if (this.data.type === 2) return
        // 选中状态
        if (this.data.selected) {
          // 如果这样push的话肯定会出现重复的元素
          this.shelfSelected.pushWithoutDuplicate(this.data)
          this.setShelfSelected(this.shelfSelected)
        } else {
          // 将没有选中状态的删除掉
          this.setShelfSelected(this.shelfSelected.filter(item => item.id !== this.data.id))
        }
      } else {
        // 跳转
        if (this.data.type === 1) {
          this.showBookDetail(this.data)
        } else if (this.data.type === 2) {
          this.$router.push({
            path: '/store/category',
            query: {
              title: this.data.title
            }
          })
        } else {
          this.$router.push('/store/home')
        }
      }
    }
  },
  mounted() {}
}
</script>

<style lang='scss' scopde>
@import '../../assets/style/global.scss';
.shelf-item {
    position: relative;
    width: 100%;
    height: 100%;
    transition: all .1s linear;
    &.shelf-item-shadow {
      box-shadow: px2rem(2) px2rem(2) px2rem(6) px2rem(2) rgba(200, 200, 200, .5);
    }
    &.is-edit {
      opacity: 0.2;
    }
    .icon-selected {
      position: absolute;
      right: px2rem(2);
      bottom: px2rem(2);
      font-size: px2rem(18);
      color: rgba(0, 0, 0, .4);
      &.is-selected {
        color: $color-blue
      }
    }
}
</style>
